<script lang='ts' setup>
import { reactive, ref } from 'vue' 
import type { FormInstance, FormRules } from 'element-plus' 
 
const state = reactive({
    name: '',
    parentCategory: [
        { label: '茶饮系列', value: 1},
        { label: '面部家居', value: 2},
        { label: '眼部家居', value: 3},
    ]
})
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<any>>({
	name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }], 
})

const props = withDefaults(defineProps<{ 
    modelValue: boolean, 
}>(), {
    modelValue: false
})

const emit = defineEmits(['update:modelValue'])

const closeDialog = () => {
    emit('update:modelValue', false)
}

const ruleForm = reactive({ 
	parent: '',
	name: '',
	sort: 1, 
})
const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			console.log('submit!')
		} else {
			console.log('error submit!', fields)
		}
	})
}

</script>

<template>
    <main>
        <el-dialog v-model="props.modelValue" title="新增商品分类" center @close="closeDialog" style="width: 800px;">
            <section>
               
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
			     status-icon>
                    <el-form-item label="分类名称" prop="name">
                        <el-input v-model="ruleForm.name" class="form-ele-size" placeholder="请输入分类名称" />
                    </el-form-item>
                    <el-form-item label="上级分类" >
                        <el-select v-model="ruleForm.parent" placeholder="请选择上级分类" class="form-ele-size">
                            <el-option :label="p.label" :value="p.value" v-for="p of state.parentCategory" :key="p.value" /> 
                        </el-select>
                    </el-form-item>
                    <el-form-item label="排序" >
                        <el-input-number v-model="ruleForm.sort" :min="1" />
                    </el-form-item>
                </el-form>
                <el-row justify="center" class="mt20">
                    <el-button  @click="closeDialog">取消</el-button>
                    <el-button type="primary"  @click="submitForm(ruleFormRef)">确定</el-button>
                </el-row>
            </section>
        </el-dialog>
    </main>
</template>

<style lang='scss' scoped>
.goods-img-list{
    display: flex;
    flex-wrap: wrap;
    .goods-img-item{
        text-align: center;
        margin-right: 20px;
        margin-bottom: 20px;
        border: 1px solid #fff;
        .goods-img-name{
            font-size: 13px;
            margin-top: 4px;
        }
       
    }
    .goods-img{
        width: 90px;
        height: 90px; 
        object-fit: cover; 
        border-radius: 6px;
        border: 2px solid #ffffff;
        cursor: pointer;
        &:hover {
            border: 2px solid #e75c5c;
        }
    }
    .active-img {
        border: 2px solid #e75c5c;
    }
}
</style>